<template>
  <div class="adjust-container">
    <el-table
      ref="categoryTable"
      :data="categorys"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :indent="20"
      size="small"
      class="custom-tree-table"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      highlight-current-row
      :expand-row-keys="expandRows"
      @current-change="handleCurrentChange"
    >
      <el-table-column
        width="55"
        align="center"
        type=""
        label="选择"
      >
        <template slot-scope="scope">
          <span style="cursor: pointer">
            <el-radio
              v-model="activeId"
              :label="scope.row.id"
              class="empty-label-radio"
              @change.native="handleCurrentChange(scope.row)"
            ><span /></el-radio>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="分类名称"
        class-name="tree-column"
      >
        <template slot-scope="scope">
          <span class="disable-dbclick">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="thumb"
        label="图标"
        align="center"
        width="100px"
      >
        <template slot-scope="scope">
          <em-image
            :src="scope.row.thumb || defaultImage"
            width="30"
            radius="5"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'CategoryLink',
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      activeRow: null,
      checks: [],
      activeId: 0,
      expandRows: [],
      categorysList: [],
      categorys: [],
      defaultImage: require('@/assets/images/default/square.png')
    }
  },
  computed: {},
  watch: {
    activeRow(v) {
      this.setCurrent(v)
    }
  },
  created() {
    this.onLoadData()
  },
  mounted() {
    if (this.value && this.value.map_data) {
      this.activeId = this.value.map_data.id
    }
  },
  methods: {
    onLoadData() {
      this.$http.assemble.category().then(res => {
        this.categorys = res.data
        if (this.activeId) {
          this.treeToggleSelected(this.activeId)
        }
      })
    },
    treeToggleSelected(id) {
      if (!id) {
        return
      }
      var activeRow = this.categorysList.find(item => {
        return item.id === id
      })
      if (activeRow) {
        this.expandRows.push(activeRow.id + '')
        if (activeRow.parent_id) {
          this.treeToggleSelected(activeRow.parent_id)
        }
      }
    },
    setCurrent(row) {
      this.activeId = row.id
      this.$refs.categoryTable.setCurrentRow(row)
      this.$emit(
        'input',
        Object.assign(
          {
            fence_id: this.value.fence_id
          },
          row.mapData
        )
      )
    },
    handleCurrentChange(val) {
      this.activeRow = val
    }
  }
}
</script>
<style lang="scss" scoped>
.adjust-container {
  height: 100%;
  > .el-main {
    flex: 1;
  }
}
::v-deep .el-table__header-wrapper .el-checkbox {
  display: none;
}
</style>
<style lang="scss" >
.empty-label-radio {
  .el-radio__label {
    padding: 0;
  }
}
.custom-tree-table {
  .el-table__expand-icon {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    &--expanded {
      transform: none;
    }
    .el-icon-arrow-right {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .el-icon-arrow-right::before,
    .el-icon-arrow-right::after {
      position: absolute;
      background-color: #ff6600;
      content: '';
      color: #ff6600;
      display: block;
      transform: scale(0.6);
      border-radius: 3px;
    }
    .el-icon-arrow-right::before {
      left: 0%;
      top: 50%;
      margin-top: -1px;
      width: 100%;
      height: 2px;
    }
    .el-icon-arrow-right::after {
      top: 0%;
      left: 50%;
      margin-left: -1px;
      width: 2px;
      height: 100%;
    }
  }
  .el-table__expand-icon.el-table__expand-icon--expanded {
    .el-icon-arrow-right::after {
      display: none;
    }
  }
  .el-table__placeholder {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    &::before {
      width: 30%;
      height: 30%;
      border-radius: 30px;
      background-color: #ff6600;
      content: '';
    }
  }
  .tree-column {
    .cell {
      display: flex;
      align-items: center;
    }
    // .disable-dbclick {
    //   -moz-user-select: none; /*火狐*/
    //   -webkit-user-select: none; /*webkit浏览器*/
    //   -ms-user-select: none; /*IE10*/
    //   -khtml-user-select: none; /*早期浏览器*/
    //   user-select: none;
    // }
  }
}
</style>

